<!-- src/views/BusinessManage.vue 完整代码 -->
<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>商品管理</p>
		</header>

		<!-- 操作按钮部分 -->
		<div class="operation-bar">
			<button class="add-btn" @click="toAddFood">
				<i class="fa fa-plus"></i> 添加商品
			</button>
		</div>

		<!-- 商品列表部分 -->
		<ul class="food-list">
			<li v-for="(item, index) in foodArr" :key="item.id" class="food-item">
				<div class="food-img">
					<img :src="item.foodImg" alt="商品图片">
				</div>
				<div class="food-details">
					<h3>{{ item.foodName }}</h3>
					<p class="food-desc">{{ item.foodExplain || '无描述' }}</p>
					<div class="food-price">¥{{ item.foodPrice }}</div>
				</div>
				<div class="food-actions">
					<button class="edit-btn" @click="toEditFood(item.id)">
						<i class="fa fa-pencil"></i> 编辑
					</button>
					<button class="delete-btn" @click="deleteFood(item.id, index)">
						<i class="fa fa-trash"></i> 删除
					</button>
				</div>
			</li>
			<li v-if="foodArr.length === 0" class="empty-tip">
				暂无商品数据，点击"添加商品"按钮创建新商品
			</li>
		</ul>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';

	export default {
		name: 'BusinessManage',
		data() {
			return {
				businessId: this.$route.query.businessId,
				foodArr: []
			};
		},
		created() {
			const token = localStorage.getItem('id_token');
			if (!token) {
				this.$router.push('/login');
				return;
			}
			this.getFoodList();
		},
		components: {
			Footer
		},
		methods: {
			// 获取商品列表
			getFoodList() {
				const token = localStorage.getItem('id_token');
				this.$axios.get('foods', {
					params: {
						business: this.businessId
					},
					headers: {
						'Authorization': `Bearer ${token}`
					}
				}).then(response => {
					const result = response.data;
					if (result.success && result.code === 200) {
						this.foodArr = result.data;
					} else {
						alert('获取商品列表失败：' + (result.message || '未知错误'));
					}
				}).catch(error => {
					console.error('获取商品列表出错：', error);
				});
			},

			// 跳转到添加商品页面
			toAddFood() {
				this.$router.push({
					path: '/addFood',
					query: {
						businessId: this.businessId
					}
				});
			},

			// 跳转到编辑商品页面
			toEditFood(foodId) {
				this.$router.push({
					path: '/editFood',
					query: {
						businessId: this.businessId,
						foodId: foodId
					}
				});
			},

			// 删除商品
			deleteFood(foodId, index) {
				if (confirm('确定要删除该商品吗？')) {
					const token = localStorage.getItem('id_token');
					this.$axios.delete(`foods/${foodId}`, {
						headers: {
							'Authorization': `Bearer ${token}`
						}
					}).then(response => {
						const result = response.data;
						if (result.success && result.code === 200) {
							this.foodArr.splice(index, 1);
							alert('删除成功');
						} else {
							alert('删除失败：' + (result.message || '未知错误'));
						}
					}).catch(error => {
						console.error('删除商品出错：', error);
					});
				}
			}
		}
	};
</script>

<style scoped>
	/* 样式保持与之前一致 */
	.wrapper {
		width: 100%;
		min-height: 100%;
		background-color: #f5f5f5;
	}

	header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.operation-bar {
		width: 100%;
		padding: 3vw;
		margin-top: 12vw;
		background-color: #fff;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
	}

	.add-btn {
		background-color: #0097EF;
		color: #fff;
		border: none;
		border-radius: 4vw;
		padding: 1.5vw 4vw;
		font-size: 3.5vw;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.add-btn i {
		margin-right: 1.5vw;
	}

	.food-list {
		width: 100%;
		padding-bottom: 14vw;
	}

	.food-item {
		width: 100%;
		background-color: #fff;
		margin-bottom: 2vw;
		box-sizing: border-box;
		padding: 3vw;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.food-img {
		width: 20vw;
		height: 20vw;
		flex-shrink: 0;
	}

	.food-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 1vw;
	}

	.food-details {
		flex-grow: 1;
		margin-left: 3vw;
		position: relative;
	}

	.food-details h3 {
		font-size: 4vw;
		color: #333;
		margin-bottom: 1vw;
	}

	.food-desc {
		font-size: 3vw;
		color: #888;
		margin-bottom: 1.5vw;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.food-price {
		font-size: 3.5vw;
		color: #f53f3f;
	}

	.food-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 2vw;
	}

	.food-actions button {
		border: none;
		background: none;
		font-size: 2.8vw;
		padding: 1vw 2vw;
		margin-bottom: 1vw;
		cursor: pointer;
		border-radius: 1vw;
	}

	.edit-btn {
		color: #0097EF;
		background-color: #e6f2ff;
	}

	.delete-btn {
		color: #f53f3f;
		background-color: #fef0f0;
	}

	.empty-tip {
		text-align: center;
		padding: 15vw 0;
		color: #999;
		font-size: 3.5vw;
		background-color: #fff;
		margin: 2vw;
		border-radius: 2vw;
	}
</style>